import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';

import TabNavigator from 'react-native-tab-navigator';
import IconFont from '../components/IconFont'
import { pxToDp } from '../utils/tools'

import Home from '../views/home'
import Contact from '../views/contact'
import Find from '../views/find'
import My from '../views/my'


export default class TabBar extends Component {
  constructor(props) {
    super(props)
    this.state = {
      selectedTab: 'home'
    }
  }

  render() {
    return (
      // 给外层标签的样式
      <View style={styles.container}>
        <TabNavigator>
          <TabNavigator.Item
            selected={this.state.selectedTab === 'home'} //判断是否被选中
            title="消息" //界面展示的标题
            titleStyle={{
              color: '#666'
            }}
            selectedTitleStyle={{

              color: '#005BAC'
            }}
            renderIcon={() => <IconFont name='icon-message' style={{fontSize:pxToDp(16), color:'#666'}} />} //未选中时图标的展示
            renderSelectedIcon={() => <IconFont name='icon-message' style={{fontSize:pxToDp(16), color:'#005BAC'}} />}  //选中时的图标
            badgeText="12" //徽章文本，多用于购物车商品数量，消息数的展示
            onPress={() => this.setState({ selectedTab: 'home' })} //点击操作，更换界面和tab
          >
            {/* 需要加载的组件 */}
            <Home></Home>
          </TabNavigator.Item>
          <TabNavigator.Item
            selected={this.state.selectedTab === 'contacts'}
            title="通讯录"
            titleStyle={{
              color: '#666'
            }}
            selectedTitleStyle={{

              color: '#005BAC'
            }}
            renderIcon={() => <IconFont name='icon-contacts' style={{fontSize:pxToDp(16), color:'#666'}} />} //未选中时图标的展示
            renderSelectedIcon={() => <IconFont name='icon-contacts' style={{fontSize:pxToDp(16), color:'#005BAC'}} />}  //选中时的图标
            onPress={() => this.setState({ selectedTab: 'contacts' })}
          >
            <Contact></Contact>
          </TabNavigator.Item>
          <TabNavigator.Item
            selected={this.state.selectedTab === 'find'}
            title="发现"
            titleStyle={{
              color: '#666'
            }}
            selectedTitleStyle={{

              color: '#005BAC'
            }}
            renderIcon={() => <IconFont name='icon-find' style={{fontSize:pxToDp(16), color:'#666'}} />} //未选中时图标的展示
            renderSelectedIcon={() => <IconFont name='icon-find' style={{fontSize:pxToDp(16), color:'#005BAC'}} />}  //选中时的图标
            onPress={() => this.setState({ selectedTab: 'find' })}
          >
            <Find></Find>
          </TabNavigator.Item>
          <TabNavigator.Item
            selected={this.state.selectedTab === 'me'}
            title="我"
            titleStyle={{
              color: '#666'
            }}
            selectedTitleStyle={{

              color: '#005BAC'
            }}
            renderIcon={() => <IconFont name='icon-user2' style={{fontSize:pxToDp(16), color:'#666'}} />} //未选中时图标的展示
            renderSelectedIcon={() => <IconFont name='icon-user2' style={{fontSize:pxToDp(16), color:'#005BAC'}} />}  //选中时的图标
            onPress={() => this.setState({ selectedTab: 'me' })}
          >
            <My></My>
          </TabNavigator.Item>
        </TabNavigator>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1 //占满全屏
  }
});
